<template>
  <van-skeleton title avatar :row="28" :loading="skeletonLoading">
    <van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>
    <van-nav-bar
      class="nav-bar"
      :title="user.nickname"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="div">
      <!--  -->
      <van-image
        class="backgroundPictureUrl"
        width="100%"
        height="200px"
        fit="cover"
        lazy-load
        :src="user.backgroundPictureUrl"
        alt="用户背景图片"
      /><br />
      <!-- @click="toDishesDetails(item.id)" -->
      <van-card class="van-card" v-for="item in evaluationArray" :key="item">
        <template #tags>
          <van-image
            class="dishes-image"
            round
            width="60px"
            height="60px"
            fit="cover"
            lazy-load
            :src="user.profilePhotoUrl"
            alt="用户头像"
          />
          <span>{{ user.nickname }}</span
          ><span>&nbsp;&nbsp;日期 {{item.evaluationDate }}</span>s
          <div>
            商家
            <van-rate
              v-model="item.evaluationScore"
              readonly
              :size="20"
              color="#ffd21e"
              icon="star"
              void-icon="star"
              void-color="#eee"
            />
            <p>51分钟送达</p>
            <p class="p-span">
              <span>口味:{{ item.evaluationScore }}星</span
              ><span>包装:{{ item.evaluationScore }}星</span
              ><span>配送:{{ item.evaluationScore }}星</span>
            </p>
            <p title="评价内容">{{ item.evaluationDescribe }}</p>
          </div>

          <van-image
            class="videoOrImageUrlOfTheReview"
            width="150px"
            height="150px"
            fit="cover"
            lazy-load
            v-if="item.videoOrImageUrlOfTheReview != ''"
            :src="item.videoOrImageUrlOfTheReview"
            alt="评价图片"
          />
          <br />

          <p @click="toShopDishesList(item.shop.shopId)" class="p-van-card">
            <!-- class="dishes-image" -->
            <van-image
              class="shop-head-portrait"
              width="60px"
              height="60px"
              fit="cover"
              lazy-load
              :src="item.shop.headPortrait"
              alt="店铺头像"
            /><span>{{ item.shop.shopName }}</span>
          </p>
          <div class="div-box">
            <div>
              <span>浏览数 {{ item.viewed }} </span>
            </div>
            <div>
              <!-- <van-icon name="like-o" /> -->
              <van-button
                @click="liking(item.id, item.user.id)"
                icon="like-o"
                :color="likedIconColor"
                round
                block
                class="button liking"
                >赞</van-button
              >
              <van-button
                @click="replyUser(), showComments(item.id, this.isShow)"
                icon="comment-o"
                round
                block
                class="button"
                >{{ comments.count }}
              </van-button>
              <van-button
                @click="more()"
                icon="more-o"
                round
                block
                class="button"
              ></van-button>
            </div>
          </div>
          <div v-show="isShow">
            <div class="comments" v-for="item1 in commentsArray" :key="item1">
              <span class="nickname">{{ item1.nickname }}:</span
              ><span>{{ item1.content }}</span
              >&nbsp;&nbsp;
              <van-button @click="replyUser()" size="small" round
                >回复</van-button
              >
            </div>

            <div class="replyUser">
              <van-cell-group v-if="reply" inset>
                <template #button>
                  <!-- @click="additionalEvaluation(item1.id,item.user.id,item1.id)" -->
                  <van-button @click="replyUser()" size="small" round block
                    >回复</van-button
                  >
                </template>
                <!-- <van-field v-model="this.evaluationEntity.content" rows="2" autosize type="textarea"
									maxlength="50" placeholder="我要说两句" show-word-limit>
									
								</van-field> -->
              </van-cell-group>
            </div>
            <div
              class="twoLevelComments"
              v-for="item2 in commentsTwoLevelArray"
              :key="item2"
            >
              <span class="nickname">{{ item2.nickname }}:</span
              ><span>
                {{ item2.content }}
                <!-- @click="additionalEvaluation(item.id,item.user.id,item.id)" -->
                <van-button @click="replyUser()" size="small" round
                  >回复</van-button
                >
              </span>
            </div>
          </div>
          <div class="comments"></div>
          <div class="replyUser">
            <van-cell-group v-if="reply" inset>
              <van-field
                v-model="this.evaluationEntity.content"
                rows="2"
                autosize
                type="textarea"
                maxlength="50"
                placeholder="我要说两句"
                show-word-limit
              >
                <template #button>
                  <van-button
                    @click="
                      additionalEvaluation(item.id, item.user.id, item.id)
                    "
                    size="small"
                    round
                    block
                    >发送</van-button
                  >
                </template>
              </van-field>
            </van-cell-group>
          </div>
        </template>
      </van-card>
      <router-view />
      <van-tabbar route>
        <van-tabbar-item replace to="/waimaiindex" icon="home-o"
          >首页</van-tabbar-item
        >
        <van-tabbar-item icon="diamond-o" badge="99+">会员</van-tabbar-item>
        <van-tabbar-item replace to="/" icon="label-o" badge="99+"
          >订单</van-tabbar-item
        >
        <van-tabbar-item icon="apps-o">更多</van-tabbar-item>
      </van-tabbar>
    </div>
  </van-skeleton>
</template>
<script>
import qs from "qs";
import { ref, onMounted } from "vue";
import { Toast } from "vant";
export default {
  name: "我的评价",
  setup() {
    const loading = ref(true);
    const skeletonLoading = ref(true);
    onMounted(() => {
      loading.value = false;
      skeletonLoading.value = false;
    });
    return {
      loading,
      skeletonLoading,
    };
  },
  data() {
    return {
      userLiking: {
        evaluationId: 0,
        likingUserId: 0,
      },
      likedIconColor: "#DCDCDC",
      evaluationArray: [],
      comments: {
        count: 0,
        comment: 0,
      },
      commentsArray: [],
      commentsTwoLevelArray: [],
      evaluation0entity: {},
      evaluationEntity: {},
      user: {
        profilePhotoUrl: "",
        backgroundPictureUrl: "",
      },
      shop: {},
      userId: 0,
      active: 0,
      reply: false,
      message: "",
      isShow: false,
      // count:[1,2,4,6,7,33,1],
      count: [],
    };
  },
  mounted() {
    //挂载之后执行的方法
    // this.getCommentList();
    this.getMyEvaluationList();
  },
  methods: {
    liking(evaluationId, likedUserId) {
      //点赞
      console.log(
        "like点赞,eId=" + evaluationId + ",likingUserId=" + likedUserId
      );
      this.userLiking.evaluationId = evaluationId;
      this.userLiking.likedUserId = likedUserId;
      this.$axios
        .put("/evaluation/user/liking/do", qs.stringify(this.userLiking)) //this.userLiking
        .then((res) => {
          //   console.log("res=" + res);
          if (res.result.data) {
            this.likedIconColor = "red";
            // Toast.success("点赞成功")
          } else {
            this.likedIconColor = "#DCDCDC";
            // Toast.fail("点赞失败")
          }
        })
        .catch((error) => {
          console.log("error:" + error);
        });
    }, //回复用户
    replyUser() {
      console.log("回复");
      if (this.reply) {
        this.reply = false;
      } else {
        this.reply = true;
      }
    }, //更多操作
    more() {
      console.log("more");
    },

    /**
     * 查询评论
     */
    showComments(evaluationId, isShow) {
      // console.log("isShow="+isShow);
      this.commentsArray = [];
      this.commentsTwoLevelArray = [];
      if (isShow) {
        console.log("设置isShow = false");
        this.isShow = false;
        this.commentsArray = [];
        this.commentsTwoLevelArray = [];
      } else {
        console.log("set isShow = true");
        this.isShow = true;
        /**
         * 查询一级评论
         */
        console.log("evaluationId=" + evaluationId);
        // console.log("this.evaluation0entity.id="+this.evaluation0entity.id);
        this.$axios
          .get(
            "/evaluation/comments/get/all/first/level/reviews/evaluationId/" +
              evaluationId
          )
          .then((res) => {
            this.commentsArray = res.result.data;
            console.log("content=" + this.commentsArray[0].content);
          })
          .catch((error) => {
            console.log("error:" + error);
          });
        /**
         * 查询二级评论
         */
        this.$axios
          .get("/evaluation/comments/user/comment/evaluationId/" + evaluationId)
          .then((res) => {
            this.commentsTwoLevelArray = res.result.data;
            console.log("content=" + this.commentsTwoLevelArray[0].content);
          })
          .catch((error) => {
            console.log("error:" + error);
          });
      }
    },
    /**
     * 写评价
     */
    additionalEvaluation(evaluationId, replyId, parentId) {
      //后台从redis里取用户编号
      this.evaluationEntity.evaluationId = evaluationId;
      console.log("evaluationId=" + evaluationId);
      this.evaluationEntity.replyId = replyId;
      this.evaluationEntity.parentId = parentId;
      console.log("evaluationId=" + this.evaluationEntity.evaluationId);
      console.log(
        "replyId=" +
          this.evaluationEntity.replyId +
          ",parentId=" +
          this.evaluationEntity.parentId
      );
      console.log("additionalEvaluation");
      qs.stringify(this.evaluationEntity);
      this.$axios
        .post("/evaluation/comments/save/entity", this.evaluationEntity)
        .then((res) => {
          console.log(res);
          if (res.result.data) {
            Toast.success("评论成功");
            console.log(
              "this.evaluationEntity.evaluationId=" +
                this.evaluationEntity.evaluationId
            );
            this.showComments(this.evaluationEntity.evaluationId, false);
            this.evaluationEntity.content = null;
          } else {
            Toast.fail("评论成功");
          }
        })
        .catch((e) => {
          Toast.fail("请求失败" + e);
        });
    },
    /**
     * 获取评价列表
     */
    getMyEvaluationList() {
      // this.userId = this.$route.query.userId;
      this.$axios
        .get("/evaluation/page/list/userId")
        .then((res) => {
          // console.log("data=" + res)
          this.evaluationArray = res.result.data.records;
          console.log("shop.id=" + this.evaluationArray[0].shop.id);
          this.user = res.result.data.records[0].user;
          console.log("backgroundPictureUrl=" + this.user.backgroundPictureUrl);
        })
        .catch((error) => {
          console.log("error:" + error);
        });
    },
    onMounted() {
      console.log("loading=false");
      //   this.loading = false;
      //   this.skeletonLoading = false;
    },
    load() {
      alert("this.count=" + this.count);
      Toast(this.count);
    },
    onRefresh() {
      setTimeout(() => {
        window.location.reload();
        // this.getShopInfoList();
        Toast("刷新成功");
        this.loading.value = false;
        this.count.value++;
      }, 1000);
    },
    onClickRight() {
      //点击发布评价
      console.log("按钮");
    },
    onClickLeft() {
      //点击返回按钮
      history.back();
    },
    toShopDishesList(shopId) {
      console.log("shopId=" + shopId);
      this.$router.push({
        path: "/shopDishesList",
        query: {
          id: shopId,
        },
      });
    },
  },
};
</script>
<style scoped>
.div {
  margin-bottom: 60px;
}

.nav-bar {
  width: 100%;
  position: fixed;
}

.backgroundPictureUrl {
  margin-top: 46px;
}

span {
  /* 上右下左 */
  margin: 10px 0px 0px 10px;
}

.videoOrImageUrlOfTheReview {
}

.shop-head-portrait {
  /* float: left; */
  /* display: inline-block; */
  /* width: 600px; */
}

.van-card {
  margin: 30px 0px 30px 0px;
  --van-card-background-color: var(--van-gray-0);
  /* border: 1px red solid; */
}

.p-van-card {
  margin: 30px 0px 30px 0px;
  height: 80px;
  background-color: var(--van-gray-1);
}

.p-span > span {
  margin: 2px 20px 2px 0px;
}

.div-box {
  display: flex;
  width: 100%;
  height: 40px;
  /* flex-direction: row-reverse; */
  justify-content: space-between;
  align-items: center;
}

.replyUser {
  margin-top: 10px;
}

.button {
  display: inline-block;
  width: 60px;
}
.liking {
}
.comments {
  margin-top: 10px;
}

.twoLevelComments {
  margin: 10px 0px 10px 0px;
}

.twoLevelComments {
  margin-left: 24px;
}
.nickname {
  color: rgb(0, 138, 197);
}
</style>
